<template>
  <div class="stories-container">
    <div class="stories-header">
      <h1>情感树洞</h1>
      <p>在这里倾诉你的心声，阅读他人的故事</p>
    </div>

    <div class="stories-content">
      <!-- 故事筛选和搜索区域 -->
      <div class="filters-section card">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索故事标题或内容..." 
            class="search-input"
            @keyup.enter="searchStories"
          >
          <button class="btn btn-primary search-btn" @click="searchStories">搜索</button>
        </div>
        
        <div class="category-filters">
          <button 
            v-for="category in categories" 
            :key="category.id"
            :class="['btn', selectedCategory === category.id ? 'btn-primary' : 'btn-secondary']"
            @click="filterByCategory(category.id)"
          >
            {{ category.name }}
          </button>
        </div>
        
        <div class="sort-options">
          <label>排序方式：</label>
          <select v-model="sortBy" class="sort-select" @change="sortStories">
            <option value="newest">最新发布</option>
            <option value="popular">最受欢迎</option>
            <option value="commented">最多评论</option>
          </select>
        </div>
      </div>

      <!-- 故事列表 -->
      <div class="stories-section">
        <div class="stories-grid">
          <div 
            v-for="story in displayedStories" 
            :key="story.id" 
            class="story-card card"
            @click="viewStoryDetail(story.id)"
          >
            <div class="story-badge" :class="getCategoryClass(story.category)">
              {{ getCategoryName(story.category) }}
            </div>
            
            <h3 class="story-title">{{ story.title }}</h3>
            
            <p class="story-excerpt">{{ getExcerpt(story.content) }}</p>
            
            <div class="story-meta">
              <span class="author">
                <i class="icon-user"></i>
                {{ story.author }}
              </span>
              <span class="date">
                <i class="icon-calendar"></i>
                {{ formatDate(story.publishTime) }}
              </span>
              <span class="likes">
                <i class="icon-heart"></i>
                {{ story.likes }}
              </span>
            </div>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination" v-if="totalPages > 1">
          <button 
            class="btn btn-secondary page-btn" 
            @click="currentPage--" 
            :disabled="currentPage === 1"
          >
            上一页
          </button>
          
          <div class="page-numbers">
            <button 
              v-for="page in visiblePages" 
              :key="page"
              :class="['btn', currentPage === page ? 'btn-primary' : 'btn-secondary']"
              @click="goToPage(page)"
            >
              {{ page }}
            </button>
          </div>
          
          <button 
            class="btn btn-secondary page-btn" 
            @click="currentPage++" 
            :disabled="currentPage === totalPages"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoriesView',
  data() {
    return {
      searchQuery: '',
      selectedCategory: 'all',
      sortBy: 'newest',
      currentPage: 1,
      itemsPerPage: 6,
      stories: [
        {
          id: 1,
          title: '我和他的十年爱情长跑',
          category: 'love',
          content: '从高中到大学，从异地到同地，我们经历了无数的风风雨雨。还记得第一次见面时的紧张，第一次牵手时的心跳加速，第一次争吵后的冷战，以及每一次和好后的甜蜜。十年间，我们一起哭过笑过，一起面对生活的挑战。\n\n在这段旅程中，我们也曾想过放弃。工作的压力、家庭的反对、距离的考验都让我们疲惫不堪。但是，每当看到对方眼中的坚定和温柔，我们就知道这份感情值得坚持。\n\n如今，我们已经步入婚姻殿堂，回望过去，那些艰难的日子反而成了最珍贵的回忆。因为正是这些经历让我们的感情更加深厚，让我们更加珍惜彼此。',
          author: '爱情长跑者',
          publishTime: '2024-01-20',
          likes: 156
        },
        {
          id: 2,
          title: '分手后的自我救赎',
          category: 'breakup',
          content: '那段黑暗的日子里，我学会了如何与自己和解。分手的痛苦像潮水一样一波波袭来，我曾经以为我会永远沉溺在悲伤中无法自拔。\n\n最初的几个月，我拒绝一切社交活动，把自己关在房间里，反复听着那些伤感的歌曲，任由眼泪肆意流淌。朋友们的关心在我看来都是多余的打扰，我觉得全世界都不理解我的痛苦。\n\n直到有一天，我无意中看到了一句话："当你失去一个人的时候，你失去的其实是那个曾经的自己。"这句话如醍醐灌顶，让我开始反思这段感情以及我自己。\n\n我开始重新审视自己的生活，培养新的兴趣爱好，学习新的技能。我报名参加了瑜伽课程，开始每天跑步，还加入了读书会。渐渐地，我发现生活中还有很多美好的事物等待我去探索。\n\n一年后的今天，我已经不再是那个脆弱的女孩。我变得更加独立、自信，也更加懂得爱自己。虽然偶尔还会想起过去的美好时光，但我已经能够平静地面对它们了。',
          author: '匿名用户',
          publishTime: '2024-01-18',
          likes: 203
        },
        {
          id: 3,
          title: '友情里的那些温暖瞬间',
          category: 'friendship',
          content: '在我最困难的时候，是朋友们给了我继续前行的勇气。记得那年失业的冬天，我几乎要被生活的重担压垮了。房租、生活费、家人的期望，一切都让我喘不过气来。\n\n是我的朋友们陪我度过了那段最黑暗的时光。小李每天下班后都会来找我聊天，带我去吃好吃的，试图转移我的注意力；小王帮我修改简历，四处打听工作机会；小张甚至把她家的客房借给我住，不收一分钱。\n\n有一次，我因为面试失败而沮丧不已，一个人坐在公园里发呆。朋友们知道后，竟然不远千里赶到公园陪我，我们就这样坐了一整夜，聊着天南海北的话题，直到天亮。\n\n那一刻我才明白，真正的友情不是锦上添花，而是雪中送炭。它不需要华丽的言辞，只需要默默的陪伴和支持。这些年来，无论我遇到什么困难，朋友们总是在我身边，给我力量和温暖。\n\n我很幸运能够拥有这样的朋友，也很感激他们给我的所有帮助。我想对所有的朋友说一声谢谢，谢谢你们让我的人生如此精彩。',
          author: '暖心朋友',
          publishTime: '2024-01-15',
          likes: 124
        },
        {
          id: 4,
          title: '爱情里的小确幸',
          category: 'love',
          content: '每天早上的一杯热咖啡，晚上的一个拥抱，这些小确幸构成了我们的爱情。很多人问我，什么是爱情？我想，爱情不仅仅是轰轰烈烈的誓言，更是平凡日子里的点点滴滴。\n\n每天早晨，他总是比我早起十分钟，为我准备一杯温度刚刚好的咖啡。这个习惯已经持续了三年，从未间断。有时候我生病了，他会特意煮一些蜂蜜柠檬水；有时候我加班到很晚，他会一直等到我回家。\n\n晚上回到家，不管多累，我们都会给对方一个温暖的拥抱。这个简单的动作，总能瞬间消除一天的疲惫。周末的时候，我们会窝在沙发上看电影，或者一起去菜市场买菜，回家做一顿简单的晚餐。\n\n这些看似平常的小事，却是我最大的幸福。我渐渐明白，真正的爱情不需要太多的浪漫和惊喜，只需要两个人在一起时的那种安心和舒适。就像现在，即使什么都不说，只是静静地坐在一起，我也觉得很满足。\n\n感谢命运让我遇见了他，让我体验到了这种简单而美好的爱情。',
          author: '幸福小女人',
          publishTime: '2024-01-25',
          likes: 87
        },
        {
          id: 5,
          title: '爸爸的沉默守护',
          category: 'family',
          content: '从小到大，爸爸很少说话，但他的爱却藏在每一个细节里。小时候，我以为爸爸不爱我，因为他从来不会像妈妈那样亲吻我的额头，也不会对我说"我爱你"这样的话。\n\n上学的时候，别的同学都有爸爸接送，只有我是一个人走回家。那时候我很羡慕别人，甚至有些怨恨爸爸。直到有一天，我在学校门口看到了一个熟悉的身影——是爸爸！原来他一直在暗中保护着我，只是不想让我知道。\n\n长大后，我才慢慢理解了爸爸的沉默。他是一个不善言辞的人，但他用自己的方式表达着对家人的爱。每次家里有什么重活，他总是第一个冲上去；每次我遇到困难，他虽然不说什么，但总会默默地支持我。\n\n去年我生病住院，妈妈因为工作脱不开身，是爸爸在医院陪了我整整一个星期。他每天变着花样给我买好吃的，还偷偷去咨询医生我的病情。看着他日渐消瘦的身影，我的眼泪忍不住流了下来。\n\n现在的我终于明白，父爱如山，深沉而伟大。虽然爸爸不善于表达，但他的爱却比任何言语都要真切。我想对他说一声："爸爸，我爱你！"',
          author: '懂事的孩子',
          publishTime: '2024-01-24',
          likes: 112
        },
        {
          id: 6,
          title: '错过的爱情',
          category: 'love',
          content: '有些人，一旦错过就不在。那是大学时代的一个午后，阳光透过梧桐叶洒在地上，斑驳的光影就像我当时的心情。她就站在图书馆门口，手里拿着一本《飘》，微笑着向我走来。\n\n我们相识于一个偶然的机会，相知于无数次的深夜长谈。她喜欢文学，我喜欢音乐；她性格安静，我性格活泼。我们互补的性格让我们成为了最好的朋友，也让我心中萌生了不一样的情愫。\n\n可是，我始终没有勇气向她表白。我以为时间还很长，以为还有无数个明天可以用来表达我的心意。直到有一天，她告诉我她要出国留学了。\n\n那一刻，我的心仿佛被什么东西狠狠撞击了一下。我想挽留，想告诉她我的真实想法，可是话到嘴边却怎么也说出口。我只是淡淡地说了一句："一路顺风。"\n\n她走了，带走了我心中那份未曾说出的爱意。多年以后，我听说她在国外结婚了，有了自己的家庭。而我，也在这漫长的岁月中学会了接受和放下。\n\n有时候我会想，如果当初勇敢一点，结果会不会不一样？但人生没有如果，只有结果和后果。错过的人，注定只能成为回忆中最美的风景。',
          author: '匿名用户',
          publishTime: '2024-01-23',
          likes: 98
        },
        {
          id: 7,
          title: '友情里的嫉妒心',
          category: 'friendship',
          content: '我发现自己对最好的朋友产生了嫉妒心，这让我很困扰。事情的起因很简单，她找到了一份理想的工作，而我还在为求职奔波。看着她在社交媒体上分享新工作的喜悦，我的心情五味杂陈。\n\n起初，我试图说服自己为她感到高兴。毕竟，她那么优秀，得到好的机会是理所当然的。可是内心深处，那种酸涩的感觉却越来越强烈。我开始有意无意地疏远她，不再主动联系，也不再关注她的动态。\n\n这种状态持续了几个月，直到有一天她主动找我谈话。她说她注意到了我的变化，问我是不是出了什么事。那一刻，我再也控制不住自己的情绪，把心里的嫉妒和自卑全部倾诉了出来。\n\n听完我的话，她没有生气，也没有安慰，而是静静地听我说完。然后她告诉我："真正的朋友，应该为彼此的成功感到高兴。如果你因为我过得好而难过，那说明我们都需要重新审视这段友谊了。"\n\n她的话让我醍醐灌顶。我意识到，嫉妒其实源于内心的不安全感和对自己的不满意。我应该努力提升自己，而不是沉浸在负面情绪中。\n\n从那以后，我把这种嫉妒转化为动力，更加努力地寻找工作。最终，我也找到了一份不错的工作。现在，我们可以毫无芥蒂地分享彼此的喜悦，这份友谊也因此变得更加珍贵。',
          author: '真诚的朋友',
          publishTime: '2024-01-22',
          likes: 76
        },
        {
          id: 8,
          title: '爱情里的信任危机',
          category: 'love',
          content: '一次偶然的发现，让我对我们的关系产生了怀疑。那天我提前下班回家，想给她一个惊喜，却发现她不在家。手机里有一条陌生号码的未接来电，而她的手机却放在客厅的茶几上。\n\n一种不祥的预感涌上心头。我开始回想最近她的种种异常：频繁的加班、神秘的电话、越来越晚的回家时间......这些原本被我忽略的细节，此刻都成了怀疑的证据。\n\n接下来的几天，我变得敏感而多疑。我会偷偷查看她的手机，跟踪她的行踪，质问她的每一个解释。她察觉到了我的变化，问我发生了什么事，但我却无法坦诚地告诉她我的怀疑。\n\n直到有一天，我在她的包里发现了一个医院的检查报告。看到上面的内容，我整个人都愣住了——她怀孕了，但不是我的孩子。\n\n那一刻，我的心彻底碎了。原来一直以来的信任都是错觉，原来她一直在欺骗我。愤怒、伤心、绝望，各种情绪交织在一起，我不知道该如何面对这一切。\n\n经过几天的冷静思考，我决定和她好好谈一谈。当我把所有的疑问摆到桌面上时，她哭了。原来那个孩子是她前男友的，因为一些复杂的家庭原因，她不得不暂时照顾那个孩子，但从未想过要和那个人复合。\n\n虽然她的解释让我稍微释怀了一些，但这次信任危机已经在我们之间留下了深深的裂痕。也许，我们需要更多的时间来修复这份感情。',
          author: '困惑的恋人',
          publishTime: '2024-01-21',
          likes: 105
        },
        {
          id: 9,
          title: '异地恋的坚持',
          category: 'love',
          content: '距离从来不是问题，不爱了才是问题。我和她因为工作原因不得不分开两地，刚开始的时候真的很不适应。每天只能通过视频聊天来维持联系，时差问题也让我们很难找到合适的时间交流。\n\n有时候我会因为她的消息回复慢而胡思乱想，怀疑她是不是有了别人。但每次看到她疲惫地出现在视频里，为了和我聊天而熬夜，我就知道我的担心是多余的。\n\n两年的时间，我们克服了无数的困难。她生病的时候我不能陪在身边，我只能在网上订花送给她；我工作压力大的时候，她会跨越半个中国来看我，只为了给我一个拥抱。\n\n现在我们终于结束了异地，开始了同城的生活。回想起那段异地恋的日子，虽然辛苦，但也让我们更加珍惜彼此。真正的爱情，是经得起时间和距离考验的。',
          author: '坚持的恋人',
          publishTime: '2024-01-12',
          likes: 189
        },
        {
          id: 10,
          title: '闺蜜间的误会与和解',
          category: 'friendship',
          content: '一次误会让我们的友谊陷入冰点，但真诚的沟通让我们重新走到一起。那是我生日的前一天，我邀请她来参加我的生日聚会，但她却说有事不能来。我心里有些不高兴，但还是勉强接受了。\n\n生日当天，我发现她竟然在社交媒体上晒出了和另一个朋友的聚餐照片，地点正是我之前提到的生日聚会上的餐厅。那一刻，我觉得自己被背叛了，所有的委屈和愤怒都涌上心头。\n\n我开始疏远她，不再主动联系，也不回复她的消息。她察觉到了我的变化，几次试图找我谈话，但我都避而不见。\n\n直到有一天，她直接来到我家门口等我。她告诉我，那天她去餐厅是为了帮我确认场地，因为她知道我一直在为生日聚会的安排而焦虑。她还特意准备了一份礼物，是一本记录我们友谊点点滴滴的相册。\n\n看到那本相册，我的眼泪瞬间涌了出来。我为自己的猜疑和任性感到羞愧，也为差点失去这样一个好朋友而后怕。我们紧紧拥抱在一起，所有的误会都在那一刻烟消云散。\n\n这次经历让我明白，真正的友谊需要信任和沟通。当出现问题时，应该坦诚地表达自己的想法，而不是选择逃避。',
          author: '珍惜友谊的人',
          publishTime: '2024-01-10',
          likes: 92
        },
        {
          id: 11,
          title: '初恋的美好与遗憾',
          category: 'love',
          content: '那份纯真的感情，即使过去了这么多年，依然是心中最柔软的角落。初恋是在大学的图书馆里开始的，那天阳光正好，她坐在靠窗的位置看书，微风吹起她的长发，那一刻我就知道，她就是我要找的人。\n\n我们在一起的两年里，没有昂贵的礼物，没有浪漫的旅行，但每一天都充满了甜蜜。一起在食堂排队吃饭，一起在操场上看星星，一起为期末考试而熬夜复习......这些简单的日常，却是我青春里最美好的回忆。\n\n毕业的时候，我们因为工作地点不同而选择了分手。虽然彼此都舍不得，但现实的压力让我们不得不做出这个痛苦的决定。\n\n多年过去了，我们都各自有了新的生活，但那份初恋的美好却从未褪色。有时候我会想，如果当初我们坚持在一起，结果会不会不一样？但我知道，有些美好正是因为它的短暂和遗憾，才显得格外珍贵。\n\n感谢那段青涩的岁月，让我体验到了爱情最初的模样。',
          author: '怀念过去的人',
          publishTime: '2024-01-08',
          likes: 145
        },
        {
          id: 12,
          title: '家庭矛盾中的成长',
          category: 'family',
          content: '与父母的争吵让我一度离家出走，但最终我们学会了理解和包容。那段时间正值青春期，我觉得父母不理解我，总是干涉我的选择。无论是选专业、交朋友还是穿衣打扮，他们都有很多意见。\n\n一次激烈的争吵后，我收拾行李离开了家。在外面的日子并不好过，每天吃泡面，住在朋友家的沙发上，还要担心父母的担心。但倔强的我就是不愿意低头。\n\n一周后，妈妈找到了我。她没有责骂我，只是抱着我哭了。那一刻我才意识到，无论我走到哪里，父母都是最关心我的人。\n\n回到家后，我们进行了一次深入的谈话。父母承认他们有时候确实过于严格，我也反思了自己任性的一面。我们约定以后遇到问题要冷静沟通，而不是用争吵来解决。\n\n这次经历让我学会了换位思考，也让我明白了家庭的重要性。现在的我们关系更加融洽，虽然偶尔还会有分歧，但我们都能以理解和包容的态度去面对。',
          author: '成长中的孩子',
          publishTime: '2024-01-05',
          likes: 78
        }
      ],
      categories: [
        { id: 'all', name: '全部' },
        { id: 'love', name: '爱情故事' },
        { id: 'friendship', name: '友情故事' },
        { id: 'family', name: '亲情故事' },
        { id: 'breakup', name: '分手经历' },
        { id: 'growth', name: '成长感悟' }
      ]
    }
  },
  computed: {
    filteredStories() {
      let result = [...this.stories];
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(story => 
          story.title.toLowerCase().includes(query) || 
          story.content.toLowerCase().includes(query)
        );
      }
      
      // 分类过滤
      if (this.selectedCategory !== 'all') {
        result = result.filter(story => story.category === this.selectedCategory);
      }
      
      // 排序
      this.sortStoriesArray(result);
      
      return result;
    },
    totalPages() {
      return Math.ceil(this.filteredStories.length / this.itemsPerPage);
    },
    displayedStories() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredStories.slice(start, end);
    },
    visiblePages() {
      const pages = [];
      const maxVisible = 5;
      
      if (this.totalPages <= maxVisible) {
        for (let i = 1; i <= this.totalPages; i++) {
          pages.push(i);
        }
      } else {
        const half = Math.floor(maxVisible / 2);
        let start = Math.max(1, this.currentPage - half);
        let end = Math.min(this.totalPages, start + maxVisible - 1);
        
        if (end - start < maxVisible - 1) {
          start = Math.max(1, end - maxVisible + 1);
        }
        
        for (let i = start; i <= end; i++) {
          pages.push(i);
        }
      }
      
      return pages;
    }
  },
  methods: {
    searchStories() {
      this.currentPage = 1;
    },
    filterByCategory(categoryId) {
      this.selectedCategory = categoryId;
      this.currentPage = 1;
    },
    sortStories() {
      // 排序已经在computed中处理
      this.currentPage = 1;
    },
    sortStoriesArray(array) {
      switch (this.sortBy) {
        case 'popular':
          array.sort((a, b) => b.likes - a.likes);
          break;
        case 'newest':
        default:
          array.sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime));
          break;
      }
    },
    getCategoryName(categoryId) {
      const category = this.categories.find(cat => cat.id === categoryId);
      return category ? category.name : '未知';
    },
    getCategoryClass(categoryId) {
      const classes = {
        love: 'badge-love',
        friendship: 'badge-friendship',
        family: 'badge-family',
        breakup: 'badge-breakup',
        growth: 'badge-growth'
      };
      return classes[categoryId] || '';
    },
    getExcerpt(content) {
      // 提取前100个字符作为摘要
      const plainText = content.replace(/\n/g, ' ');
      return plainText.length > 100 ? plainText.substring(0, 100) + '...' : plainText;
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const now = new Date();
      const diff = now - date;
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      
      if (days === 0) {
        return '今天';
      } else if (days === 1) {
        return '昨天';
      } else if (days < 7) {
        return `${days} 天前`;
      } else {
        return date.toLocaleDateString('zh-CN');
      }
    },
    viewStoryDetail(storyId) {
      this.$router.push(`/story/${storyId}`);
    },
    goToPage(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style scoped>
.stories-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.stories-header {
  text-align: center;
  margin-bottom: 2rem;
}

.stories-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.stories-header p {
  color: #666;
  font-size: 1.1rem;
}

.stories-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.filters-section {
  background-color: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.search-box {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.search-input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  font-size: 1rem;
}

.search-btn {
  padding: 0.8rem 1.5rem;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.category-filters .btn {
  padding: 0.6rem 1.2rem;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sort-select {
  padding: 0.6rem;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  font-size: 1rem;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.story-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.story-badge {
  position: absolute;
  top: -10px;
  right: 15px;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
}

.badge-love {
  background-color: #ff9a9e;
}

.badge-friendship {
  background-color: #a1c4fd;
}

.badge-family {
  background-color: #ffecd2;
  color: #333;
}

.badge-breakup {
  background-color: #a8edea;
  color: #333;
}

.badge-growth {
  background-color: #d4fc79;
  color: #333;
}

.story-title {
  font-size: 1.3rem;
  color: #333;
  margin: 1rem 0 0.8rem 0;
  line-height: 1.4;
}

.story-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.story-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.9rem;
  color: #999;
}

.story-meta span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.page-numbers {
  display: flex;
  gap: 0.5rem;
}

.page-btn {
  padding: 0.6rem 1rem;
}

.page-numbers .btn {
  padding: 0.6rem 1rem;
  min-width: 40px;
}

@media (max-width: 768px) {
  .stories-container {
    padding: 1rem;
  }
  
  .stories-header h1 {
    font-size: 2rem;
  }
  
  .filters-section {
    padding: 1rem;
  }
  
  .search-box {
    flex-direction: column;
  }
  
  .category-filters {
    gap: 0.5rem;
  }
  
  .category-filters .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .stories-grid {
    grid-template-columns: 1fr;
  }
  
  .story-card {
    padding: 1.2rem;
  }
  
  .story-title {
    font-size: 1.2rem;
  }
  
  .story-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}
</style>